<template>
  <!-- 物料卡 -->
  <!-- class="white--text headline d-flex justify-center text-truncate" -->
  <v-card class="mx-auto" v-ripple @click="clickHandle">
    <v-card-text>
      <div class="ellipsis">
        <span>{{material.name}}</span>
      </div>
    </v-card-text>
  </v-card>
</template>

<script>
    /**
     * 物料卡 - 基础 。 只是设置了统一的样式
     * @author Canaan
     * @date 2019/8/13 15:41.
     */
    export default {
        name: 'materialCard',
        mounted() {

        },
        components: {},
        props: {
            material: {
                type: Object,
                default() {
                    return {
                        id: null,
                        name: null
                    }
                }
            }
        },
        data() {
            return {}
        },
        computed: {},
        methods: {
            clickHandle() {
                this.$emit('click');
            }
        },
        watch: {},
        filters: {},
        beforeDestroy() {

        }
    }

</script>

<style scoped>

  .v-card {
    background-color: #fff !important;
    box-shadow: 0 0 2px #ddd !important;
  }

  .ellipsis {
    margin: 0 auto;
    font-size: 20px;
    font-weight: 700;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #ff9859;
    border-radius: 5px;
  }

</style>
